<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include::header"></head>
<style>
    .mylabel{
        width:35px;padding-left: 0px;padding-right: 5px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="col-sm-12" style="width: 100%">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>筛选条件</h5>
                        </div>
                        <div class="ibox-content" style="padding-left: 2px;margin-left: 2px">
                            <div class="layui-form">
                                <div class="layui-form-item" style="padding-left: 2px;margin-left: 2px">
                                    <div class="form-group col-sm-12">
                                        <div style="line-height: 40px; float: left">
                                            <button type="button" class="btn btn-info btn-sm" onclick="changeMain()">
                                                <i class="fa fa-exchange" aria-hidden="true"></i><span id="mainFloor">按宿舍查询</span>
                                            </button>
                                        </div>
                                        <div id="con1">
                                            <label class="layui-form-label mylabel">学院</label>
                                            <div class="layui-input-inline" style="width: 135px">
                                                <select name="colId" id="colId" lay-search="" lay-filter="colId">
                                                    <option value="" selected="">搜索或选择学院</option>
                                                    <option th:each="college:${colleges}" th:value="${college.id}">[[${college.colName}]]</option>

                                                </select>
                                            </div>
                                            <label class="layui-form-label mylabel">专业</label>
                                            <div class="layui-input-inline" style="width: 135px">
                                                <select name="majId" id="majId" lay-search="" disabled="disabled"
                                                        lay-filter="majId">
                                                    <option value="">请先选择学院</option>
                                                </select>
                                            </div>
                                            <label class="layui-form-label mylabel">班级</label>
                                            <div class="layui-input-inline" style="width: 135px">
                                                <select name="claId" id="claId" lay-search="" disabled="disabled"
                                                        lay-filter="claId">
                                                    <option value="">请先选择学院</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="con2" hidden="hidden">
                                            <label class="layui-form-label mylabel">宿舍楼</label>
                                            <div class="layui-input-inline" style="width: 135px">
                                                <select name="floorId" id="floorId" lay-search="" lay-filter="floorId">
                                                    <option value="" selected="">搜索或选择宿舍楼</option>
                                                    <option th:each="floor:${floors}" th:value="${floor.id}">[[${floor.floorName}]]</option>
                                                </select>
                                            </div>
                                            <label class="layui-form-label mylabel">宿舍</label>
                                            <div class="layui-input-inline" style="width: 135px">
                                                <select name="dormId" id="dormId" lay-search="" disabled="disabled"
                                                        lay-filter="majId">
                                                    <option value="">请先选择宿舍楼</option>
                                                </select>
                                            </div>
                                        </div>

                                        <label class="layui-form-label mylabel">搜索</label>
                                        <div class="layui-input-inline" style="width: 135px">
                                            <select name="conditionName1" id="conditionName1" lay-search=""
                                                    lay-filter="conditionName1">
                                                <option value="" selected="">请选择条件</option>
                                                <option value="1">学号</option>
                                                <option value="2">姓名</option>
                                                <option value="3">性别</option>
                                                <option value="3">手机号</option>
                                                <option value="3">邮箱</option>
                                            </select>
                                        </div>
                                        <div class="layui-input-inline layui-hide" id="conditionDiv1">
                                            <input type="text" name="condition1" oninput="searchRe(this)"
                                                   id="condition1"
                                                   lay-verify="title" autocomplete="off"
                                                   placeholder="请输入查询内容(模糊搜索)" class="layui-input">
                                        </div>

                                    </div>
                                    <div class="col-sm-12">
                                        <div class="col-sm-9">
                                            <div class="form-group col-sm-12" id="moreConDiv" hidden="hidden"
                                                 style="padding-left: 0px; float: left;margin:0px">
                                                <label class="layui-form-label mylabel" style="width: 45px;">条件一</label>
                                                <div class="layui-input-inline" style="width: 135px">
                                                    <select name="conditionName2" id="conditionName2" lay-search=""
                                                            lay-filter="conditionName2">
                                                        <option value="" selected="">请选择条件</option>
                                                    </select>
                                                </div>
                                                <div class="layui-input-inline layui-hide" id="conditionDiv2">
                                                    <input type="text" name="condition2" oninput="searchRe(this)"
                                                           id="condition2"
                                                           lay-verify="title" autocomplete="off"
                                                           placeholder="请输入查询内容(模糊搜索)" class="layui-input">
                                                </div>
                                                <label class="layui-form-label mylabel" style="width: 45px;">条件二</label>
                                                <div class="layui-input-inline" style="width: 135px">
                                                    <select name="conditionName3" id="conditionName3" lay-search=""
                                                            lay-filter="conditionName3">
                                                        <option value="" selected="">请选择条件</option>
                                                    </select>
                                                </div>
                                                <div class="layui-input-inline layui-hide" id="conditionDiv3">
                                                    <input type="text" name="condition3" oninput="searchRe(this)"
                                                           id="condition3"
                                                           lay-verify="title" autocomplete="off"
                                                           placeholder="请输入查询内容(模糊搜索)" class="layui-input">
                                                </div>
                                            </div>
                                        </div>
                                        <div style="line-height: 40px; float: left">
                                            <button type="button" class="btn btn-info btn-sm" onclick="moreSearch()">
                                                <i class="fa fa-search" aria-hidden="true"></i>更多
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm" onclick="add()">
                                                <i class="fa fa-plus" aria-hidden="true"></i>添加
                                            </button>
                                            <button type="button" class="btn btn-danger btn-sm" onclick="batchRemove()">
                                                <i class="fa fa-trash" aria-hidden="true"></i>批量删除
                                            </button>
                                            <a class="btn btn-info btn-sm ' + s_userComment + '" href="#" mce_href="#"
                                               title="刷新" onclick="reLoad()"><i class="fa fa-refresh"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="studentTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script>
    var isFirst = true;
    //显示更多搜索区域
    var switchMore = false;
    //首要按宿舍查找还是院系查找
    var mainFloor = false;
    //定义一些变量,用来判断下拉框相关逻辑
    var colId = "";
    var majId = "";
    var claId = "";
    var floorId = "";
    var dormId = "";
    var bedId = "";
    //form渲染表单
    var form;
    //最终传递数据的集合
    var map = new Map();
    //条件下拉选择各项
    var myconditionMap = new Map();
    function setDefaultMyConditionMap() {
        myconditionMap.put("stuId","学号");
        myconditionMap.put("stuName","姓名");
        myconditionMap.put("stuPhone","手机号");
        myconditionMap.put("stuEmail","邮箱");
    }
    setDefaultMyConditionMap();

    //各个条件选择name
    var conditionName1="";
    var conditionName2="";
    var conditionName3="";

</script>
<script type="text/javascript" th:src="@{/static/js/admin/student/stu_list.js}"></script>
</body>
<script>
    layui.use(['form'], function () {
        form = layui.form;
        //学院专业班级相关逻辑
        form.on('select(colId)', function (data) {
            if (data.value == colId) {
                //当前选中未改变
                return;
            } else {
                colId = data.value;
                if (isNull(data.value)) {
                    map.delete("colId");
                    map.delete("majId");
                    map.delete("claId");
                    //将系和班级恢复初始状态
                    layui.$("#majId").empty();
                    layui.$("#majId").append(deFaultOption("请先选择学院"));
                    layui.$("#majId").prop("disabled", "disabled");
                    layui.$("#claId").empty();
                    layui.$("#claId").prop("disabled", "disabled");
                    layui.$("#claId").append(deFaultOption("请先选择学院"));
                } else {
                    map.put("colId",data.value);
                    //加载系的内容
                    layui.$("#majId").removeAttr("disabled");
                    loadOption("#majId", "/dorm/student/getMajByCol/" + data.value, "搜索或选择专业")
                    //将系和班级恢复初始状态
                    layui.$("#claId").empty();
                    layui.$("#claId").prop("disabled", "disabled");
                    layui.$("#claId").append(deFaultOption("请先选择专业"));
                }
            }
            resetSelect();
            reLoad();
        });
        form.on('select(majId)', function (data) {
            if (data.value == majId) {
                return;
            } else {
                majId = data.value;
                if (isNull(data.value)) {
                    map.delete("majId");
                    map.delete("claId");
                    //将系和班级恢复初始状态
                    layui.$("#claId").empty();
                    layui.$("#claId").prop("disabled", "disabled");
                    layui.$("#claId").append(deFaultOption("请先选择专业"));
                } else {
                    map.put("majId",data.value);
                    //加载班级的内容
                    layui.$("#claId").removeAttr("disabled");
                    loadOption("#claId", "/dorm/student/getClaByMaj/" + data.value, "搜索或选择班级")
                }
            }
            resetSelect();
            reLoad();
        });
        form.on('select(floorId)', function (data) {
            if (data.value == floorId) {
                return;
            } else {
                floorId = data.value;
                if (isNull(data.value)) {
                    map.delete("floorId");
                    layui.$("#dormId").empty();
                    layui.$("#dormId").append(deFaultOption("请先选择宿舍楼"));
                    layui.$("#dormId").prop("disabled", "disabled");
                } else {
                    map.put("dormId",data.value);
                    layui.$("#dormId").removeAttr("disabled");
                    loadOption("#dormId", "/dorm/student/getDormByFloor/" + data.value, "搜索或选择宿舍")
                }

            }
            resetSelect();
            reLoad();
        });
        form.on('select(dormId)', function (data) {
            if (data.value == dormId) {
                return;
            } else {
                dormId = data.value;
                if (isNull(data.value)) {
                } else {
                }

            }
            resetSelect();
            reLoad();
        });
        form.on('select(claId)', function (data) {
            if (data.value == claId) {
                return;
            } else {
                claId = data.value;
                if (isNull(data.value)) {
                    map.delete("claId");
                } else {
                    map.put("claId",data.value);
                }

            }
            resetSelect();
            reLoad();
        });
        form.on('select(conditionName1)', function (data) {
            if (data.value == conditionName1) {
                return;
            } else {
                //将选择框重置下
                conditionName1 = data.value;
                if(isNull(conditionName1)){
                    map.delete(data.value);
                    layui.$("#conditionDiv1").addClass("layui-hide")
                }else {
                    map.put(data.value,"");
                    layui.$("#conditionDiv1").removeClass("layui-hide")
                }
                setSearchOption(conditionName1,"conditionName1");
                setSearchOption(conditionName2,"conditionName2");
                setSearchOption(conditionName3,"conditionName3");
            }
            resetSelect();
        });
        form.on('select(conditionName2)', function (data) {
            if (data.value == conditionName2) {
                return;
            } else {
                //将选择框重置下
                conditionName2 = data.value;
                if(isNull(conditionName2)){
                    layui.$("#conditionDiv2").addClass("layui-hide")
                    map.delete(data.value);
                }else {
                    layui.$("#conditionDiv2").removeClass("layui-hide")
                    map.put(data.value,"");
                }
                setSearchOption(conditionName1,"conditionName1");
                setSearchOption(conditionName2,"conditionName2");
                setSearchOption(conditionName3,"conditionName3");
            }
            resetSelect();
        });
        form.on('select(conditionName3)', function (data) {
            if (data.value == conditionName3) {
                return;
            } else {
                //将选择框重置下
                conditionName3 = data.value;
                if(isNull(conditionName3)){
                    layui.$("#conditionDiv3").addClass("layui-hide")
                    map.delete(data.value);
                }else {
                    layui.$("#conditionDiv3").removeClass("layui-hide")
                    map.put(data.value,"");
                }
                setSearchOption(conditionName1,"conditionName1");
                setSearchOption(conditionName2,"conditionName2");
                setSearchOption(conditionName3,"conditionName3");
            }
            resetSelect();
        });

    });

    function deFaultOption(optionDesc) {
        var arr = new StringBulider();
        arr.append("<option")
            .append(' value="0"')
            .append(">")
            .append(optionDesc)
            .append("</option>");
        return arr.toString();
    }
    function loadOption(id, url, desc) {
        //移除select
        jQuery(id).empty();
        $.ajax({
            url: path.format(url),
            type: "get",
            data: {},
            success: function (r) {
                var data = JSON.parse(r);
                if (data.status == 1000) {
                    var arr = new StringBulider();
                    arr.append("<option")
                        .append(' value=""')
                        .append()
                        .append(">")
                        .append(desc)
                        .append("</option>");
                    for (var i = 0; i < data.model.length; i++) {
                        arr.append("<option")
                            .append(" value=")
                            .append(data.model[i].id)
                            .append(">")
                            .append(data.model[i].name)
                            .append("</option>");
                    }
                    jQuery(id).append(arr.toString());
                    resetSelect();
                } else {
                    layer.msg(data.desc, function () {

                    });
                }
            }
        });
    }

    function searchRe(data) {
        var idName = data.getAttribute("id");
        var value = $("#"+idName).val();
        if(idName == "condition1"){
            map.put(conditionName1,value);
        }
        if(idName == "condition2"){
            map.put(conditionName2,value);
        }
        if(idName == "condition3"){
            map.put(conditionName3,value);
        }
        reLoad();
    }



    function moreSearch() {
        if (switchMore) {
            switchMore = false;
            $("#moreConDiv").hide(300);
        } else {
            switchMore = true;
            $("#moreConDiv").show(300);
        }
    }

    function changeMain() {
        if (mainFloor) {
            mainFloor = false;
            $("#mainFloor").text("按宿舍查找");
            $("#con1").show();
            $("#con2").hide();
            //将系和班级恢复初始状态
            $("#majId").empty();
            $("#majId").append(deFaultOption("请先选择学院"));
            $("#majId").prop("disabled", "disabled");
            $("#claId").empty();
            $("#claId").prop("disabled", "disabled");
            $("#claId").append(deFaultOption("请先选择学院"));
            $('#colId option[value=""]').removeAttr('selected');
            $('#colId option[value=""]').attr('selected','selected');
        } else {
            mainFloor = true;
            $("#mainFloor").text("按院系查找");
            $("#con1").hide();
            $("#con2").show();
            $("#dormId").empty();
            $("#dormId").append(deFaultOption("请先选择宿舍楼"));
            $("#dormId").prop("disabled", "disabled");
            $("option[value='台州']").attr('selected', 'selected');
            $('#floorId option[value=""]').removeAttr('selected');
            $('#floorId option[value=""]').attr('selected','selected');
        }
        resetSelect();
    }
    function resetSelect() {
        form.render('select');
    }
    function setSearchOption(name,id) {
        jQuery("#"+id).empty();
        var arr = new StringBulider();
        arr.append("<option value=''>")
        arr.append("请选择条件").append("</option>");
        $.map(myconditionMap.data,function(n,i){
            var flag = true;
            if(id == "conditionName1"){
                if(i==conditionName2||i==conditionName3){
                    flag = false;
                }
            }
            if(id == "conditionName2"){
                if(i==conditionName1||i==conditionName3) {
                    flag = false;
                }
            }
            if(id == "conditionName3"){
                if(i==conditionName1||i==conditionName2){
                    flag = false;
                }
            }
           if(flag){
               arr.append("<option value='").append(i).append("'");
               if(i==name){
                   arr.append(" selected");
               }
               arr.append(">").append(n).append("</option>");
           }
        });
        jQuery("#"+id).append(arr.toString());
        if(isFirst==false) {
            resetSelect();
        }
    }

</script>
</html>